<template>
	<view >
		<view class="buyer">
			<view class="top_price">
				<view class="price f-w-7">
					{{type==1?sael_price:re_price}}
				</view>
				<view class="text">
					{{type_name}}[元/克]
				</view>
			</view>
			<view class="item">
				<view class="title">
					选择类别
				</view>
				<view @click="show=true" class="picker">
					{{type_name}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					{{type==1?'买':'卖'}}出克重(可用保证金<text style="color: red;">0</text> 可定价<text style="color: red;">0</text>克)
				</view>
				<view  class="inp_box flex flex_b">
					<view>
						<input type="text"
							class="inp"
							placeholder="最大定价5000g最小定价10g"
							/>
					</view>
					<view style="color: rgba(128, 128, 128, 1);">
						克
					</view>
				</view>
			</view>
			<view class="agreement flex">
				<checkbox-group @change="changebox" >
				  <label class="checkbox">
				    <checkbox
						class="checkbox-item"
						color="red"
						:checked="checkboxValues"></checkbox>
				  </label>
				</checkbox-group>
				<view style="padding-top: 5rpx;">
					我已阅读并同意
				</view>
				<view style="padding-top: 5rpx;color: red;">
					《在线定价服务协议》
				</view>
			</view>
			
			
			<u-picker :show="show" :columns="columns" 
				itemHeight="88"
				:closeOnClickOverlay="true"
				@cancel="close"
				@confirm="confirm"
				@close="close"
				keyName="goods_type_name"></u-picker>
		</view>
		<view class="btn">
			立即{{type==1?'购买':'卖出'}}
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			type:{  // 1买 2卖
				type:String,
				default:()=>{
					return '1'
				}
			}
		},
		data(){
			return {
				checkboxValues:false,
				show:false,
				columns: [
				],
				type_name:'黄金9999',
				type_id:0,
				re_price:"",
				sael_price:'',
			}
		},
		mounted() {
			this.getGoldPriceList()
		},
		methods:{
			getGoldPriceList(){
				this.$api.base.getGoldPriceList({status:1}).then(res=>{
					if(res.data.length){
						this.type_name = res.data[0].goods_type_name
						this.type_id = res.data[0].id
						this.re_price = res.data[0].re_price
						this.sael_price = res.data[0].sael_price
						this.columns = [
							res.data
						]
					}
					
				})
			},
			changebox(){
				this.checkboxValues = !this.checkboxValues
			},
			close(){
				this.show = false
			},
			confirm(e){
				this.type_name = e.value[0].goods_type_name
				this.type_id = e.value[0].id
				this.re_price = e.value[0].re_price
				this.sael_price = e.value[0].sael_price
				this.show = false
			},
		}
	}
</script>
<style lang="scss">
	page{
		background: rgba(248, 248, 248, 1);
	}
</style>
<style lang="scss" scoped>
	.agreement{
		padding: 24rpx 0;
		font-size: 30rpx;
	}
	.btn{
		width: 638rpx;
		height: 88rpx;
		opacity: 1;
		border-radius: 10rpx;
		background: rgba(247, 52, 38, 1);
		margin: 0 auto;
		margin-top: 24rpx;
		color: #fff;
		font-weight: 700;
		text-align: center;
		line-height: 88rpx;
	}
	.buyer{
		padding: 0 24rpx;
		background-color: #fff;
		.top_price{
			padding: 24rpx 0;
			text-align: center;
			.price{
				color: rgba(247, 52, 38, 1);
				font-size: 48rpx;
			}
			.text{
				color: rgba(128, 128, 128, 1);
				font-size: 20rpx;
			}
			border-bottom: 1px solid rgba(229, 229, 229, 1);
		}
		.item{
			padding: 24rpx 0;
			border-bottom: 1px solid rgba(229, 229, 229, 1);
			.title{
				font-size: 24rpx;
				color: rgba(128, 128, 128, 1);
				margin-bottom: 24rpx;
			}
			.picker{
				color: rgba(0, 0, 0, 1);
				font-size: 30rpx;
				font-weight: 700;
			}
			.inp_box{
				font-size: 30rpx;
				font-weight: 700;
				.inp{
					width: 600rpx;
				}
			}
		}
	}
</style>